* {
  margin: 0;
  padding: 0;
}

// 定义变量
$color: pink;
// 定义一个混入
@mixin myxin($width, $height) {
  width: $width;
  height: $height;
  border: 4px solid #ccc;
}
.box {
  color: $color;
  @include myxin(200px, 100px);
}
.pox {
  @include myxin(300px, 200px);
  .son {
    color: $color;
  }
  a {
    color: green;
    &:hover {
      color: yellow;
    }
  }
}
// 定义可继承的代码
%myextend {
  width: 200px;
  height: 100px;
  background-color: #ddd;
  border: 5px dashed #999;
}
.foo {
  @extend %myextend;
}

.boo {
  @extend %myextend;
}
